<template>
  <div class="loginPage">
    <div class="header">
      <router-link to="home"><img src="../static/logo.png" /></router-link>
      <router-link to="home" tag="div" class="backHome"> 回到首页 </router-link>
    </div>
    <div class="login" v-if="login">
      <div class="register">
        <div class="registerform">
          <a-form-model
            ref="form"
            :model="form"
            :rules="rules"
            @submit="handleSubmit"
            @submit.native.prevent
          >
            <a-form-model-item prop="user">
              <a-input v-model="form.user" placeholder="手机/邮箱" size="large">
                <a-icon slot="prefix" type="user" />
              </a-input>
            </a-form-model-item>
            <div class="code">
              <a-form-model-item prop="verification">
                <a-input
                  v-model="form.verification"
                  placeholder="验证码"
                  size="large"
                >
                  <a-icon slot="prefix" type="phone" />
                </a-input>
              </a-form-model-item>
              <div class="getCode">获取验证码</div>
            </div>
            <a-form-model-item prop="password">
              <a-input-password
                v-model="form.password"
                placeholder="请输入密码"
                size="large"
                @blur="disShow()"
                @focus="show()"
              >
                <a-icon slot="prefix" type="lock" />
                <icon-font
                  slot="suffix"
                  type="icon-eye"
                  v-if="isShow"
                  @click="showPwd()"
                />
              </a-input-password>
            </a-form-model-item>
            <a-form-model-item prop="password1">
              <a-input-password
                v-model="form.password1"
                type="password"
                placeholder="请再次输入密码"
                size="large"
              >
                <a-icon slot="prefix" type="lock" />
              </a-input-password>
            </a-form-model-item>
          </a-form-model>
        </div>
        <p class="agreement">
          <a-form-model-item prop="agre">
            <a-checkbox v-model="form.agre" :checked="checked"></a-checkbox>
            <span @click.stop="basic()">《用户协议》</span>
          </a-form-model-item>
        </p>
        <div class="nextStep" @click="onSubmit()">同意协议并提交</div>
        <p class="toLogin">
          已有账号，马上
          <router-link to="login" tag="div" class="nav-list-item active">
            <span>登录</span>
          </router-link>
        </p>
      </div>
    </div>
    <div class="loginfoot" v-if="loginfoot">
      Copyright © 2019 tabbywork.com | 成都指针飞渡数字科技有限公司
      <a href="http://www.beian.miit.gov.cn/">蜀ICP备17022130号-1</a>
    </div>
    <div class="agreementBox" v-if="sign">
      <div class="agreement">
        <p class="title">指针飞渡用户协议</p>
        <div class="agreementMain">
          <p>
            《用户注册协议》（以下简称“协议”）是您（或称“用户”，指注册、登录、购买、使用、浏览本服务的个人或组织）与成都海盗海科技有限公司（以下简称“海盗海科技”）关于指针飞渡网站（www.tabbywork.com，简称本站)所订立的协议。
          </p>
          <p>
            海盗海科技在此特别提醒用户认真阅读、充分理解---本协议中各条款，包括免除或者限制海盗海科技责任的免责条款及对用户的权利限制条款。请您审慎阅读并选择接受或不接受本协议(未成年人应在法定监护人陪同下阅读）。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉相关服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。
          </p>
          <h3>一、注册协议条款的确认和接受</h3>
          <p>
            本站同意按照本协议的规定及其不定时发布的操作规则提供基于互联网和移动互联网的相关服务(以下称“网络服务”)。
          </p>
          <p>
            为获得网络服务, 申请人应当认真阅读、充分理解本《协议》中各条款,
            包括免除或者限制指针飞渡责任的免责条款及对用户的权利限制条款。审慎阅读并选择接受或不接受本《协议》(未成年人应在法定监护人陪同下阅读)。
          </p>
          <p>
            同意接受本协议的全部条款的,
            申请人应当按照页面上的提示完成全部的注册程序,
            并在注册程序过程中点击“同意”按钮, 否则视为不接受本《协议》全部条款,
            申请人应当终止并退出申请。
          </p>
          <p>
            本《协议》可由指针飞渡定期更新,
            更新后的协议条款一旦公布即代替原来的协议条款, 恕不再另行通知,
            用户可在指针飞渡查阅最新版协议条款。在指针飞渡修改《协议》条款后,
            如果用户不接受修改后的条款, 请立即停止使用指针飞渡提供的网络服务,
            继续使用的用户将被视为已接受了修改后的协议。
          </p>
          <h3>二、服务内容</h3>
          <p>
            1、 网络服务的具体内容由指针飞渡根据实际情况提供,
            包括行业资讯、咨询服务，软件服务，定制服务等其他服务。
          </p>
          <p>
            2、指针飞渡提供的网络服务包括收费和免费。对于收费服务,
            指针飞渡会在用户使用之前给予用户明确的提示,
            只有用户根据提示确认同意支付相关费用,
            用户才能使用该等收费服务。如用户未支付相关费用,
            则指针飞渡有权不向用户提供该等收费服务。
          </p>
          <p>
            3、用户理解, 指针飞渡仅提供明确承诺的网络服务,
            除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网络而支付的手机费)均应由用户自行负担。
          </p>
          <p>
            4、用户理解，指针飞渡提供免费试用服务，试用时间到期后，指针飞渡有权收回试用服务。期间产生的数据，如果用户没有及时备份，造成的损失由用户自己承担，指针飞渡概不负责。用户购买服务到期后，指针飞渡也有权收回服务内容。
          </p>
          <h3>三、用户帐号</h3>
          <p>1、 经指针飞渡注册系统完成注册程序用户即为正式用户。</p>
          <p>
            2、如发现用户帐号中含有不雅文字或不恰当名称的,
            指针飞渡保留注销其用户帐号的权利。
          </p>
          <p>
            3、用户帐号的所有权归指针飞渡, 用户完成申请注册手续后,
            用户享有使用权。
          </p>
          <p>
            4、用户有义务保证密码和帐号的安全,
            用户利用该帐号所进行的一切活动引起的任何损失或损害,
            由用户自行承担全部责任,
            指针飞渡不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题,
            应立即修改账号密码并妥善保管。因黑客行为或用户的保管疏忽导致帐号非法使用,
            指针飞渡不承担任何责任。
          </p>
          <p>
            5、用户帐号和密码仅由初始申请注册人使用，用户不得将自己用户账户或密码有偿或无偿以转让、出借、授权等方式提供给第三人操作和使用,
            否则用户应当自行承担因违反此要求而遭致的任何损失。违反本项约定的，指针飞渡并保留收回账号的权利。若因违反本约定对他人造成损害的，用户应与实际使用人承担连带赔偿责任，同时指针飞渡保留追究用户违约责任的权利。
          </p>
          <p>
            6、用户帐号在丢失、遗忘密码及因合用产生使用权归属纠纷后,
            须遵照指针飞渡的申诉途径请求找回帐号。
          </p>
          <p>
            7、指针飞渡建议用户应当使用本人名义为用户账户充值或行使付款行为。若用户存在使用第三人的名义进行充值或付款，或委托第三人代为充值或付款之行为的，则以上行为被视作本人的行为，若由于该第三人行为导致充值或付款行为失败或成功后又被撤销的，均被认为是用户本人真实意思的表示和用户本人实施的行为，由此所造成的一切法律后果均由用户自行承担。
          </p>
          <h3>四、使用规则</h3>
          <p>
            1、 用户在使用指针飞渡网络服务过程中, 必须遵循国家的相关法律法规,
            不得发布危害国家安全、色情、暴力、侵犯版权等任何合法权利等非法内容;
            也不得利用指针飞渡平台发布含有虚假、有害、胁迫、侵害他人隐私、骚扰、侵害、中伤、粗俗、或其它道德上令人反感的内容。
          </p>
          <p>
            2、指针飞渡可依其合理判断, 对违反有关法律法规或本协议约定;
            或侵犯、妨害、威胁任何人权利或安全的内容, 或者假冒他人的行为,
            指针飞渡有权停止传输任何前述内容,
            并有权依其自行判断对违反本条款的任何用户采取适当的法律行动,
            包括但不限于, 删除具有违法性、侵权性、不当性等内容,
            阻止其使用指针飞渡全部或部分网络服务,
            并且依据法律法规保存有关信息并向有关部门报告等。
          </p>
          <p>
            3、对于经由指针飞渡网络服务而传送的内容,
            指针飞渡不保证前述内容的正确性、完整性或品质。用户在接受本服务时,
            有可能会接触到令人不快、不适当或令人厌恶的内容。在任何情况下,
            指针飞渡均不对任何内容负责,
            包括但不限于任何内容发生任何错误或纰漏以及衍生的任何损失或损害。指针飞渡有权(但无义务)自行拒绝或删除经由指针飞渡网络服务提供的任何内容。用户使用上述内容,
            应自行承担风险。
          </p>
          <p>
            4、对于用户通过指针飞渡网络服务(包括但不限于指针飞渡网、指针飞渡论坛等服务)上传到指针飞渡上可公开获取区域的任何内容,
            用户同意指针飞渡在全世界范围内具有免费的、永久性的、不可撤销的、非独家的和完全再许可的权利和许可,
            以使用、复制、修改、改编、出版、翻译、据以创作衍生作品、传播、表演和展示此等内容(整体或部分),
            和/或将此等内容编入当前已知的或以后开发的其他任何形式的作品、媒体或技术中。
          </p>
          <p>
            5、用户通过指针飞渡网络服务所发布的任何内容并不反映指针飞渡的观点或政策,
            指针飞渡对此不承担任何责任。用户须对上述内容的真实性、合法性、无害性、有效性等全权负责,
            与用户所发布信息相关的任何法律责任由用户自行承担, 与指针飞渡无关。
          </p>
          <h3>五、版权声明</h3>
          <p>
            指针飞渡提供的网络服务中包含的任何文本、图片、图形、软件、音频和/或视频资料均受版权、商标和/或其它财产所有权法律的保护,
            未经相关权利人同意,
            上述资料均不得在任何媒体直接或间接发布、播放、出于播放或发布目的而改写或再发行,
            或者被用于其他任何商业目的。所有以上资料或资料的任何部分仅可作为私人和非商业用途保存。指针飞渡不就由上述资料产生或在传送或递交全部或部分上述资料过程中产生的延误、不准确、错误和遗漏或从中产生或由此产生的任何损害赔偿,
            以任何形式, 向用户或任何第三方负责。
          </p>
          <h3>六、隐私保护</h3>
          <p>
            1、保护用户隐私是指针飞渡的一项基本政策,
            指针飞渡保证不对外公开或向第三方提供用户的注册资料及用户在使用网络服务时存储在指针飞渡内的非公开内容,
            但下列情况除外:
          </p>
          <p>（1）事先获得用户的书面明确授权;</p>
          <p>（2）根据有关的法律法规要求;</p>
          <p>（3）按照相关政府主管部门的要求;</p>
          <p>（4）为维护社会公众的利益;</p>
          <p>（5）为维护指针飞渡的合法权益;</p>
          <p>
            2、为了更好地为用户提供全面服务，用户同意指针飞渡可将用户注册资料及使用信息提供指针飞渡关联公司使用。指针飞渡保证前述关联公司同等级地严格遵循本协议第六条第1款之隐私保护责任。
          </p>
          <p>
            3、用户同意：指针飞渡或指针飞渡运营商的关联公司在必要时有权根据用户注册时或接受服务时所提供的联系信息（包括但不限于电子邮件地址、联系电话、联系地址、即时聊天工具账号等），通过电子邮件、电话、短信、邮寄、即时聊天、弹出页面等方式向用户发送如下信息：
          </p>
          <p>
            （1）各类重要通知信息，可能包括但不限于订单、交易单、修改密码提示等重要信息。此类信息可能对用户的权利义务产生重大的有利或不利影响，用户务必及时关注。
          </p>
          <p>
            （2）商品和服务广告、促销优惠等商业性信息。若用户不愿意接收此类信息，则可通过告知（口头或书面）的方式通知指针飞渡或指针飞渡运营商的关联公司取消发送，亦可通过指针飞渡或指针飞渡运营商关联公司所提供的相应退订功能（若有）进行退订。
          </p>
          <h3>七、协议的用途、更新和效力</h3>
          <p>
            1、本协议之服务条款用以规范用户使用指针飞渡提供的服务,本协议与指针飞渡社区行为准则构成完整的协议。
          </p>
          <p>
            2、
            鉴于国家法律法规不时变化及指针飞渡运营之需要，指针飞渡有权对本协议条款不时地进行修改，修改后的协议一旦被公布于指针飞渡上即告生效，并替代原来的协议。
            用户有义务不时关注并阅读最新版的协议及网站公告。如用户不同意更新后的协议，则应立即停止接受指针飞渡依据本协议提供的服务；若用户继续使用指针飞渡提供的服务的，即视为同意更新后的协议。
            如果本协议中任何一条被视为废止、无效或因任何理由不可执行，该条应视为可分的且并不影响任何其余条款的有效性和可执行性。
          </p>
        </div>
        <div class="backRegister" @click.stop="basic()">继续注册</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginfoot: true,
      isShow: false,
      login: true,
      sign: false,
      checked: true,
      size: "large",
      password: "",
      password1: "",
      visibilityToggle: false,
      form: {
        user: "",
        verification: "",
        agre: "",
      },
      rules: {
        user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        verification: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        password1: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
        agre: [
          { required: true, message: "请勾选同意协议", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    handleSubmit(e) {
      console.log(this.form);
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    basic() {
      this.sign = !this.sign;
      this.login = !this.login;
      this.loginfoot = !this.loginfoot;
    },
  },
};
</script>

<style lang="less" scoped>
.loginPage {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  .header {
    width: 100%;
    height: 80px;
    background: #fff;
    box-sizing: border-box;
    padding-left: 147px;
    padding-right: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 151px;
      cursor: pointer;
    }
    .backHome {
      width: 104px;
      height: 29px;
      background: #1768e4;
      border-radius: 4px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      line-height: 29px;
      text-align: center;
      cursor: pointer;
    }
  }
  .login {
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    .register {
      width: 350px;
      .registerform {
        margin-top: 31px;
      }
      .code {
        display: flex;
        .getCode {
          width: 129px;
          height: 40px;
          background-color: #1768e4;
          box-shadow: 0 2px 6px 0 #d8eee1;
          border-radius: 4px;
          color: #fff;
          font-size: 18px;
          line-height: 40px;
          cursor: pointer;
          font-family: Microsoft YaHei;
          font-weight: 400;
          text-align: center;
          margin-left: 20px;
        }
      }
      .agreement {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666;
        span {
          color: #1768e4;
          cursor: pointer;
        }
      }
      .nextStep {
        width: 350px;
        height: 40px;
        background-color: #1768e4;
        box-shadow: 0 2px 6px 0 #d8eee1;
        border-radius: 4px;
        color: #fff;
        font-size: 18px;
        line-height: 40px;
        cursor: pointer;
      }
      .toLogin {
        font-size: 14px;
        color: #999;
        div {
          display: inline-block;
          color: #1768e4;
          cursor: pointer;
        }
      }
      .nextStep,
      .toLogin {
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-align: center;
        margin-top: 23px;
      }
    }
  }
  .agreementBox {
    height: calc(100vh - 83px);
    box-sizing: border-box;
    padding: 49px 0 0;
    .title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 700;
      color: #222;
      text-align: center;
    }
    .agreementMain {
      width: 1050px;
      margin: 44px auto 0;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #222;
      p {
        margin-bottom: 0;
      }
      h3 {
        font-size: 16px;
        margin: 20px 0;
        font-weight: 700;
      }
    }
    .backRegister {
      width: 140px;
      height: 40px;
      background-color: #1768e4;
      box-shadow: 0 2px 6px 0 #d8eee1;
      border-radius: 4px;
      color: #fff;
      font-size: 16px;
      line-height: 40px;
      text-align: center;
      margin: 58px auto 50px;
      cursor: pointer;
    }
  }
  .loginfoot {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #787878;
    text-align: center;
  }
}
</style>